<template>
  <el-card class="monitor-card" :class="{ 'animate-pulse': loading }">
    <template #header>
      <div class="flex justify-between items-center">
        <span class="text-lg font-bold">CPU</span>
        <el-tag :type="getStatusType(data.totalUsage)" size="small">
          {{ getStatusText(data.totalUsage) }}
        </el-tag>
      </div>
    </template>
    
    <el-skeleton :loading="loading" animated :rows="4">
      <template #default>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <!-- 环形进度条 -->
          <div class="flex justify-center items-center">
            <el-progress
              type="dashboard"
              :percentage="Math.round(data.totalUsage)"
              :color="getProgressColor(data.totalUsage)"
              :width="120"
            >
              <template #text>
                <span class="text-lg font-bold">{{ Math.round(data.totalUsage) }}%</span>
              </template>
            </el-progress>
          </div>
          
          <!-- 核心信息 -->
          <div class="grid grid-cols-2 gap-2">
            <div class="info-item">
              <el-tooltip content="物理核心数">
                <span>物理</span>
              </el-tooltip>
              <span>{{ data.physicalCount }}</span>
            </div>
            <div class="info-item">
              <el-tooltip content="逻辑核心数">
                <span>逻辑</span>
              </el-tooltip>
              <span>{{ data.logicalCount }}</span>
            </div>
            <div class="info-item">
              <el-tooltip content="用户空间使用率">
                <span>用户</span>
              </el-tooltip>
              <span>{{ data.userUsage.toFixed(1) }}%</span>
            </div>
            <div class="info-item">
              <el-tooltip content="系统空间使用率">
                <span>系统</span>
              </el-tooltip>
              <span>{{ data.systemUsage.toFixed(1) }}%</span>
            </div>
            <div class="info-item">
              <el-tooltip content="当前频率">
                <span>频率</span>
              </el-tooltip>
              <span>{{ (data.currentFreq / 1000).toFixed(1) }} GHz</span>
            </div>
            <div class="info-item">
              <el-tooltip content="最大频率">
                <span>峰值</span>
              </el-tooltip>
              <span>{{ (data.maxFreq / 1000).toFixed(1) }} GHz</span>
            </div>
          </div>
        </div>
        
        <!-- 型号信息 -->
        <div class="mt-4 text-center truncate" :title="data.name">
          <el-tag type="info" size="small">{{ data.name }}</el-tag>
        </div>
      </template>
    </el-skeleton>
  </el-card>
</template>

<script setup lang="ts">
import type { GetCpuInfoRes } from '@/api/monitor/types';

defineProps<{
  data: GetCpuInfoRes;
  loading: boolean;
}>();

// 状态类型计算
const getStatusType = (usage: number) => {
  if (usage > 80) return 'danger';
  if (usage > 60) return 'warning';
  return 'success';
};

const getStatusText = (usage: number) => {
  if (usage > 80) return '高负载';
  if (usage > 60) return '中负载';
  return '正常';
};

// 进度条颜色
const getProgressColor = (usage: number) => {
  return usage > 80 ? '#f56c6c' : usage > 60 ? '#e6a23c' : '#67c23a';
};
</script>

<style lang="scss" scoped>
.monitor-card {
  @apply transition-all hover:shadow-lg;
  .info-item {
    @apply flex justify-between py-1 text-sm border-b border-gray-100 dark:border-gray-700;
    span:first-child {
      @apply text-gray-500 dark:text-gray-400;
    }
  }
}
</style>